<template>
	<el-col :span="24" class="header_container">
		<el-col :span="12" id="view">
			<!-- <div class="logoImage"  @click="backhome"/> -->
			<span id="viewtitle">概览</span>
		</el-col>
  		<el-col :span="10" class="tools">
  			<!-- <el-tooltip :content="'自动刷新'" placement="bottom" class="auto_refresh_switch"> -->
  				<el-switch class="auto_refresh_switch" v-model="refresh_flag" active-color="#1DB2BF" @change="refresh"></el-switch>
  				<!-- <mt-switch class="auto_refresh_switch" active-color="#1DB2BF" v-model="refresh_flag" @change="refresh"></mt-switch> -->

  			<!-- </el-tooltip> -->
  			<span id="auto_refresh_title"> 自动刷新 </span>
  		</el-col>
	</el-col>
</template>

<script scoped>
	//利用不同组件间共同的js文件进行传值
	import herderjs from "../utils/header.js"
	// import ME from "../utils/ME.js"
	export default {

		//当前组件定义的变量
		data() {
			return {
				refresh_flag: true,
				timer: null,
				val: 0
			}
		},

		//组件挂载时调用
		mounted () {
			
			//创建定时器
			this.timer = setInterval(() => {
				//向herderjs中传值
				// herderjs.$on('val', (data) => {
					// console.log(data)
					if (this.val === 0) {
						herderjs.$emit('val',this.val)
						this.val += 1
					}
			    // })
			},1000)
			herderjs.$on('val', (data) => {
				// console.log(data)
				if (data === 3) {
					this.val = 0
				}
			})
		},

		//组件销毁时调用
		destroyed () {
			//情况定时器
			clearInterval(this.timer)
		},

		//当前组件中定义的方法
		methods: {
			//refresh函数用于实现页面中的自动刷新控制
			refresh() {
				herderjs.$emit('refresh_flag',this.refresh_flag)
				if(this.refresh_flag===false) {
					clearInterval(this.timer)
				} else {
					this.val = 0
					this.timer = setInterval(() => {
						if (this.val === 0) {
							herderjs.$emit('val',this.val)
							this.val += 1
						}
					},1000)
				}
			},
			//backhome函数为重定义路由回主页
			backhome () {
				this.$router.push(`/`)
			}
		}
	};
</script>

<style scoped>

	.header_container {
		background-color: rgb(255, 255, 255);
		/*height: 10.2%;*/
		height: 1.12rem;
		box-shadow: 0 0 4px 0 rgba(205,205,205,0.50);
	}

	.tools{
		height: 100%;
		float: right;
		margin-right: 4%;
	}

	#view {
		height: 100%;
	}

	#viewtitle {
		font-size: 0.32rem;
		color: #262626;
		float: left;
		color: rgb(0,0,0);
		text-decoration:none;
		position: relative;
        top: 50%; /*偏移*/
        margin-top: -0.24rem;
        margin-left: 0.2rem;
        font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;
        letter-spacing: 0;
	}

	#auto_refresh_title {
		font-size: 0.28rem;
		float: right;
		margin-right: 4%;
		color: rgb(0,0,0);
		text-decoration:none;
		position: relative;
        top: 50%; /*偏移*/
        margin-top: -0.2rem;
        font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;
        letter-spacing: 0;
        color: #666666;
	}

	.auto_refresh_switch {
		float: right;
		position: relative;
        top: 50%; /*偏移*/
        margin-top: -10px;
		margin-right: 3%;
		/*cursor: pointer;*/
	}

	.auto_refresh_switch>>>.el-switch__core {
		height: 0.4rem;
		width: 0.8rem !important;
		border-radius: 0.2rem;
		/*margin-left: -0.34rem;*/
	}

	.auto_refresh_switch>>>.el-switch__core::after {
		height: 0.32rem;
		width: 0.32rem;
		border-radius: 0.2rem;
		top: 0.025rem;
		/*margin-left: -0.34rem;*/
	}

	.tools >>> .el-switch {
		font-size: 0.28rem;
		line-height: 0.4rem;
	}

	.auto_refresh_switch.is-checked>>>.el-switch__core::after {
		/*left: 100%;*/
		margin-left: -0.34rem;
	}

</style>